<template>
<div>
  <div class="filter_tit">
    <ul>
      <li v-for="(item,index) in searchMenu" :class="{'hot':item.checked}" @click="filterClick(index)" :key='index'>{{item.name}}<i class="icon iconfont" :class="{'icon-iconfontunfold':item.checked,'icon-down':!item.checked}"></i></li>
    </ul>
  </div>
  <div class="filter_con" v-if="filterShow" @click="closeFilterShow">
    <div class="filter_bg" @click="eventPro">
      <!-- ************ 距离 ************ -->
      <div v-if="filterType.distance" class="filter_top_line">
        <div class="filter_tab">
          <p
            :class="{hot:type.checked}"
            @click="chooseType('distance', type.key, index)"
            v-for="(type, index) in distanceTypes"
            :key="index">{{type.name}}</p>
        </div>
      </div>
      <!-- ************ 餐饮类型 ************ -->
      <div v-if="filterType.couponType" class="filter_top_line">
        <div class="filter_tab">
          <p
            :class="{hot:type.checked}"
            @click="chooseType('couponType', type.key, index)"
            v-for="(type,index) in couponTypeList"
            :key="index">{{type.name}}</p>
        </div>
      </div>
      <!-- ************ 筛选 ************ -->
      <div v-if="filterType.screening" class="filter_top_line">
        <!--
          <div class="filter_com_tit borderNone">人均</div>
          <div class="filter_tab">
            <p :class="{hot:type.checked}"
              @click="chooseType('screening', type.key, index, 'perCapita')"
              v-for="(type,index) in perCapitaList"
              :key="index">{{type.name}}</p>
          </div>
        -->
        <div class="filter_com_tit">设施</div>
        <div class="filter_tab">
          <p :class="{hot:type.checked}"
            v-for="(type,index) in facilities"
            @click="chooseType('screening', type.key, index, 'facility')">{{type.name}}</p>
        </div>
      </div>
      <!-- ************ 按钮 ************ -->
      <div class="filter_btn">
        <p class="filter_btn_sub" v-if="filterType.distance" @click="near">附近</p>
        <p class="filter_btn_sub" v-else-if="filterType.couponType" @click="allType">全部</p>
        <p class="filter_btn_sub" v-else-if="filterType.screening" @click="resetBtn">重置</p>
        <p class="filter_btn_main" @click="clickChoose">确定</p>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import * as types from '../../vuex/types.js'
import getData from '../../service/getData.js'
import {mapState} from 'vuex'
import {Storage} from 'src/utils/storage.js'

export default {
  name: 'coupon-search',
  data: () => ({
    searchMenu: [
      {name: '附近', type: 'distance', checked: false},
      {name: '全部',type: 'couponType',checked: false},
      {name: '筛选',type: 'screening',checked: false}
    ],
    filterType: {
      distance: false,
      couponType: false,
      screening: false
    },
    filterShow: false,
    distanceTypes: [
      {key: '1', name: '1km', checked: false},
      {key: '3', name: '3km', checked: false},
      {key: '5', name: '5km', checked: false},
      {key: '10', name: '10km', checked: false}
    ],
    perCapitaList: [
      {key: 1, name: '0-50', checked: false},
      {key: 2, name: '50-100', checked: false},
      {key: 3, name: '100-200', checked: false},
      {key: 4, name: '500-1000', checked: false},
      {key: 5, name: '1000以上', checked: false}
    ],
    facilities: [
      {key: 1, name: 'WIFI', checked: false},
      {key: 2, name: '可停车', checked: false},
      {key: 3, name: '刷卡', checked: false},
      {key: 4, name: '卡座', checked: false},
      {key: 5, name: '包间', checked: false},
      {key: 6, name: '宝宝椅', checked: false},
      {key: 7, name: '无烟区', checked: false},
      {key: 8, name: '吸烟区', checked: false},
      {key: 9, name: '沙发位', checked: false},
      {key: 10, name: '露天位', checked: false},
      {key: 11, name: '表演', checked: false},
      {key: 12, name: '景观位', checked: false}
    ],
    couponTypeList: [],
    checkedType: '',
    searchVal: {
      near: '', // 距离
      mchtType: '', // 餐饮类型
      mchtFacil: '' // 设施
    }
  }),
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      couponTit: state => state.coupon.couponTit,//左上角标题
    })
  },
  methods: {
    closeFilterShow: function(){
      this.filterShow = false;
      this.searchMenu.forEach((item, key) => {
        item.checked = false
      });
//    this.clickChoose()
    },
    filterClick: function(index) {
      // console.log(document.body);
      // var el = document.querySelector("#filter_tit");
      // var el2 = document.querySelector(".filter_con");
      // var _top = el.offsetTop,
      //   _height = el.offsetHeight;
      // el2.style.top = _top + _height + 'px';

      // document.body.style.overflow = this.filterShow ? 'hidden' : 'auto';
      // document.documentElement.style.overflow = this.filterShow ? 'hidden' : 'auto';
      this.filterShow = !this.filterShow;

      if (index == 0){
        this.checkedType = 'distance'
      } else if (index == 1){
        this.checkedType = 'couponType'
      } else if (index == 2){
        this.checkedType = 'screening'
      }
      this.searchMenu.forEach((item, key) => {
        if (key === index) {
          item.checked = !item.checked
          this.filterShow = item.checked
        } else {
          item.checked = false
        }
      })

      Object.keys(this.filterType).forEach(item => {
        if (item === this.checkedType) {
          this.filterType[item] = true
        } else {
          this.filterType[item] = false
        }
      })
    },
    clickChoose: function(){ // 确定按钮
      let searchVal = this.searchVal   // 筛选值
      let name // 显示的名字
      if (this.checkedType === 'distance') { // 附近
        this.distanceTypes.forEach(item => {
          if (item.checked) {
            searchVal.near = item.key
            name = item.name
          }
        })
        if (!searchVal.near) {
          searchVal.near = ''
          name = '附近'
        }
        this.searchMenu[0].name = name
        this.$store.commit('couponDistanceChoose', searchVal.near)
      } else if (this.checkedType === 'couponType') { // 电子劵类型
        this.couponTypeList.forEach(item => {
          if (item.checked) {
            searchVal.mchtType = item.name;
            name = item.name
          }
        });
        if (!name) {
          searchVal.mchtType = '全部';
           if(this.$route.query.type){
           	 name = '全部'
           }else{
           	 name = Storage.get('menuArrMess',true).tit
           }
        }
        if(this.$route.query.type){
        	
        this.searchMenu[1].name = name;
        this.$store.commit(types.coupon_tit, name)
        }else{
        this.searchMenu[1].name = name;
        this.$store.commit(types.coupon_tit, name)
        }
       
      } else if (this.checkedType === 'screening') { // 筛选
        /**
        * // 人均
        * this.perCapitaList.forEach(item => {
        *   if (item.checked) {
        *     searchVal.mchtPer = item.name
        *   }
        * })
        */
        // 设施
        let searchStr = [];
        this.facilities.forEach(item => {
          searchStr.push(Number(item.checked))
        });
        searchVal.mchtFacil = searchStr.join('');
        // this.$store.commit('couponScreenChoose', {mchtFacil:searchVal.mchtFacil, mchtPer: searchVal.mchtPer})
        this.$store.commit('couponScreenChoose', {mchtFacil:searchVal.mchtFacil})
      }
      if (searchVal) {
        this.$emit('click-screening', searchVal);
        setTimeout(() => {
          this.filterShow = false;
          this.searchMenu.forEach(item => {
            item.checked = false
          })
        }, 100)
      }
    },
    chooseType: function(type, key, index, childType) {
      this.checkedType = type;
      if (type === 'distance') { // 附近
          this.distanceTypes.forEach(item => {
            item.checked = false
          });
          if (key) {
            let value = this.distanceTypes[index].checked;
            this.distanceTypes[index].checked = !value
          }
      } else if (type === 'couponType') { // 电子劵x类型
          this.couponTypeList.forEach(item => {
            item.checked = false
          });
          if (key) {
            let value = this.couponTypeList[index].checked;
            this.couponTypeList[index].checked = !value
          }
      } else if (type === 'screening') { // 筛选
        if (childType === 'perCapita') { // 人均
          this.perCapitaList.forEach(item => {
            item.checked = false
          });
          let value = this.perCapitaList[index].checked;
          this.perCapitaList[index].checked = !value
        } else if (childType === 'facility') { // 设施
          let value = this.facilities[index].checked;
          this.facilities[index].checked = !value
        }
      }
    },
    // 附近
    near: function() {
      this.searchVal.near = ''
      this.chooseType('distance', '')
      this.clickChoose()
    },
    // 全部餐饮类型
    allType: function() {
      this.searchVal.mchtType = ''
      this.chooseType('couponType', '')
      this.clickChoose()
    },
    // 筛选重置
    resetBtn: function() {
      // 人均
      /**
      *  this.perCapitaList.forEach(item => {
      *    item.checked = false
      *  })
      */
      // 设施
      this.facilities.forEach(item => {
        item.checked = false
      })
    },
    eventPro: function() {
      event.stopPropagation();
    }
  },
  created: function() {
    let couponTypeList = Storage.get('menuArr',true);
    let name
    name = this.view === 'search' ? '全部' : this.couponTit;
    if(this.$route.query.type||this.$route.query.type=='home'){
    	this.searchMenu[1].name = name
    }else{
    	this.searchMenu[1].name = Storage.get('menuArrMess',true).tit
    }
    
    let mchtType = couponTypeList.find(item => item.dictValue === name)
    let key = mchtType ? mchtType.dictId : ''
    couponTypeList.forEach(item => {
      item.name = item.dictValue
      item.key = item.dictId
      item.checked = false
      if (item.dictId === key) {
        item.checked = true
      }
    })
    this.couponTypeList = couponTypeList
  }
}
</script>

<style lang="scss" scoped>
.filter_tab{overflow: hidden;margin-top: .6rem;}
.filter_tab p{float: left;margin: 0 1.25%;box-sizing:border-box;line-height: 2.4rem;background: #fff;border:1px solid #bcbcbc;width: 22%;font-size:1rem;color:#666; text-align: center;border-radius: .2rem;margin-bottom: .667rem;}
.filter_tab .hot{background: #ec4e89;border-color:#ec4e89;color:#fff;}
.filter_top_line {
  border-top: 1px solid #e6e6e6;
}
.filter_com_tit {
  height: 2rem;
  line-height: 2.6rem;
}
.filter_tab:after {
  content: '';
  display: block;
  clear: both;
}
</style>
